<template>
  <div>
    <el-config-provider :message="config">
      <el-button mb-2 @click="handle">Switch Language</el-button>
      <br />
      <!-- <el-button mb-2 @click="open">消息</el-button> -->
      <!-- <el-config-provider :message="handle">
      <el-button @click="open">OPEN</el-button>
    </el-config-provider> -->
      <el-config-provider :locale="locale">
        <el-table mb-1 :data="[]" />
        <el-pagination :total="100" />
      </el-config-provider>
    </el-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import en from 'element-plus/dist/locale/en.mjs';

const language = ref('zh-cn');
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en));

const toggle = () => {
  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn';
};

// 消息配置
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
const config = reactive({
  max: 3,
});
const open = () => {
  ElMessage(`已成功切换语言，目前为${localeCode.value}`);
};

// 新方法
const handle = () => {
  toggle(), open();
};
// 计算属性
const localeCode = computed(() =>
  language.value === 'zh-cn' ? '中文' : '英文'
);
</script>
